<template>
  <div>
    <myheader></myheader>
    <navtable></navtable>
    <div class="clear"></div>

    <!--购物车 -->
    <div class="concent" style="max-width:1200px">
      <div style="margin:20px 0;font-size:24px">我的购物车</div>
      <div id="cartTable" v-if="shopcarts">
        <div class="cart-table-th">
          <div class="wp">
            <div class="th th-chk">
              <div id="J_SelectAll1" class="select-all J_SelectAll">

              </div>
            </div>
            <div class="th th-item">
              <div class="td-inner">商品信息</div>
            </div>
            <div class="th th-price">
              <div class="td-inner">单价</div>
            </div>
            <div class="th th-amount">
              <div class="td-inner">数量</div>
            </div>
            <div class="th th-sum">
              <div class="td-inner">金额</div>
            </div>
            <div class="th th-op">
              <div class="td-inner">操作</div>
            </div>
          </div>
        </div>
        <div class="clear"></div>

        <div class="item-list">
          <div class="bundle  bundle-last " v-for="sps in shopcarts">
            <div class="bundle-hd">
              <div class="bd-promos">
                <div class="bd-has-promo"><el-button type="text"  class="bd-has-promo-content" @click="toUser(sps[0].mchtId)">卖家:{{sps[0].mchtName}}</el-button>&nbsp;&nbsp;
                </div>
                <span class="list-change theme-login">编辑</span>
              </div>
            </div>
            <div class="clear"></div>
            <div class="bundle-main" v-for="(shopcart,index) in sps">
              <ul class="item-content clearfix">
                <li class="td">
                  <div class="cart-checkbox">
                    <input class="check" name="itemId" v-bind:value="shopcart" v-on:change="checkChanged(shopcart)" type="checkbox" v-model="checkedItem">
                    <label></label>
                  </div>
                </li>
                <li class="td td-item">
                  <div class="item-pic" v-on:click="toItem(shopcart.itemId)">
                    <a href="javascript:;;" target="_blank" v-bind:data-title="shopcart.itemName" class="J_MakePoint">
                      <img width="80px" v-bind:src="shopcart.mainImg" class="itempic J_ItemImg"></a>
                  </div>
                  <div class="item-info" v-on:click="toItem(shopcart.itemId)">
                    <div class="item-basic-info">
                      <a href="javascript:;;" target="_blank" v-bind:title="shopcart.itemName" class="item-title J_MakePoint">{{shopcart.itemName}}</a>
                    </div>
                  </div>
                </li>
                <li class="td td-info">
                  <div class="item-props item-props-can">
                  </div>
                </li>
                <li class="td td-price">
                  <div class="item-price price-promo-promo">
                    <div class="price-content">
                      <div class="price-line">
                        <em class="price-original">{{shopcart.sellingPrice}}</em>
                      </div>
                      <div class="price-line">
                        <em class="J_Price price-now" tabindex="0">{{shopcart.discountPrice}}</em>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="td td-amount">
                  <div class="amount-wrapper ">
                    <div class="item-amount ">
                      <div class="sl">
                        <input class="min am-btn" name="" type="button" value="-" v-on:click='sub(shopcart)' />
                        <input class="text_box" name="" readonly type="text" v-model="shopcart.itemNum" style="width:30px;" />
                        <input class="add am-btn" name="" type="button" value="+" v-on:click='add(shopcart)' />
                      </div>
                    </div>
                  </div>
                </li>
                <li class="td td-sum">
                  <div class="td-inner">
                    <em tabindex="0" class="J_ItemSum number">{{shopcart.sellingPrice*shopcart.itemNum}}</em>
                  </div>
                </li>
                <li class="td td-op">
                  <div class="td-inner">
                    <a title="移入收藏夹" class="btn-fav" href="javascript:;">移入收藏夹</a>
                    <a href="javascript:;" class="delete" v-on:click="del(shopcart.id)"> 删除</a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="clear"></div>
      </div>
      <div class="clear"></div>

      <div class="float-bar-wrapper" v-if="shopcarts">
        <div id="J_SelectAll2" class="select-all J_SelectAll">
          <div v-on:click="selectAll()">
            <input class="check-all" id="J_SelectAllCbx2" name="select-all" value="true" type="checkbox">
            <span>全选</span>
          </div>
        </div>
        <div class="operations">
          <a href="#" hidefocus="true" class="deleteAll">删除</a>
          <a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
        </div>
        <div class="float-bar-right">
          <div class="amount-sum">
            <span class="txt">已选商品</span>
            <em id="J_SelectedItemsCount">{{checkedItem.length}}</em><span class="txt">件</span>
            <div class="arrow-box">
              <span class="selected-items-arrow"></span>
              <span class="arrow"></span>
            </div>
          </div>
          <div class="price-sum">
            <span class="txt">合计:</span>
            <strong class="price">¥<em id="J_Total" v-text="allPrice"></em></strong>
          </div>
          <div class="btn-area" v-on:click='initOrder()'>
            <a href="javascript:;;" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
              <span>结&nbsp;算</span></a>
          </div>
        </div>

      </div>

      <div v-if="!shopcarts" class="w-1000 h-400" style="text-align:center;line-height:400px">
        你还没有加购任何商品，快去<router-link :to="{name:'home'}" style="color:red">逛逛</router-link>吧
      </div>

      <div class="footer">
        <div class="footer-hd">
          <p>
            <a href="#">恒望科技</a>
            <b>|</b>
            <a href="#">商城首页</a>
            <b>|</b>
            <a href="#">支付宝</a>
            <b>|</b>
            <a href="#">物流</a>
          </p>
        </div>
        <div class="footer-bd">
          <p>
            <a href="#">关于恒望</a>
            <a href="#">合作伙伴</a>
            <a href="#">联系我们</a>
            <a href="#">网站地图</a>
            <em>© 2015-2025 Hengwang.com 版权所有</em>
          </p>
        </div>
      </div>

    </div>

    <!--操作页面-->

    <div class="theme-popover-mask"></div>

    <div class="theme-popover">
      <div class="theme-span"></div>
      <div class="theme-poptit h-title">
        <a href="javascript:;" title="关闭" class="close">×</a>
      </div>
      <div class="theme-popbod dform">
        <form class="theme-signin" name="loginform" action="" method="post">

          <div class="theme-signin-left">

            <li class="theme-options">
              <div class="cart-title">颜色：</div>
              <ul>
                <li class="sku-line selected">12#川南玛瑙<i></i></li>
                <li class="sku-line">10#蜜橘色+17#樱花粉<i></i></li>
              </ul>
            </li>
            <li class="theme-options">
              <div class="cart-title">包装：</div>
              <ul>
                <li class="sku-line selected">包装：裸装<i></i></li>
                <li class="sku-line">两支手袋装（送彩带）<i></i></li>
              </ul>
            </li>
            <div class="theme-options">
              <div class="cart-title number">数量</div>
              <dd>
                <input class="min am-btn am-btn-default" name="" type="button" value="-" />
                <input class="text_box" name="" type="text" value="1" style="width:30px;" />
                <input class="add am-btn am-btn-default" name="" type="button" value="+" />
                <span class="tb-hidden">库存<span class="stock">1000</span>件</span>
              </dd>

            </div>
            <div class="clear"></div>
            <div class="btn-op">
              <div class="btn am-btn am-btn-warning">确认</div>
              <div class="btn close am-btn am-btn-warning">取消</div>
            </div>

          </div>
          <div class="theme-signin-right">
            <div class="img-info">
              <img src="../../assets/images/kouhong.jpg_80x80.jpg" />
            </div>
            <div class="text-info">
              <span class="J_Price price-now">¥39.00</span>
              <span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
            </div>
          </div>

        </form>
      </div>
    </div>
    <navfull></navfull>
  </div>
</template>

<script>
import myheader from '@/components/myheader.vue'
import navfull from '@/components/navfull.vue'
import navtable from '@/components/navtable.vue'
import leftmenu from '@/components/leftmenu.vue'
export default {
  name: 'shopcart',
  data () {
    return {
      checkedItem: [],
      size: 10,
      shopcarts: [],
      allPrice: 0,
      selectFlag: false
    }
  },
  components: {
    myheader,
    navfull,
    navtable,
    leftmenu
  },
  mounted () {
    this.init();
  },
  methods: {
    init () {
      this.axios.get("/trade/shopCarts", {
        params: {
          size: this.size
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.shopcarts = result.data;
        } else {
          this.shopcarts = null;
        }
      })
    },
    add (shopcart) {
      this.axios.put("/trade/shopCart/itemNum", {
        id: shopcart.id,
        itemId: shopcart.itemId,
        itemNum: shopcart.itemNum + 1
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          shopcart.itemNum = result.data;
          if (result.msg != null) {
            this.$layer.msg(result.msg);
          }
          this.checkChanged();
        } else {
          this.$layer.msg((result.msg == null || "" ? '操作失敗' : result.msg));
        }
      })
    },
    sub (shopcart) {
      if (shopcart.itemNum > 1) {
        this.axios.put("/trade/shopCart/itemNum", {
          id: shopcart.id,
          itemId: shopcart.itemId,
          itemNum: shopcart.itemNum - 1
        }).then((res) => {
          var result = res.data;
          if (result.code == 200) {
            shopcart.itemNum = result.data;
            if (result.msg != null) {
              this.$layer.msg(result.msg);
            }
            this.checkChanged();
          } else {
            this.$layer.msg((result.msg == null || "" ? '操作失敗' : result.msg));
          }
        })
      }
    },
    del (id) {
      this.axios.delete("/trade/shopCart", {
        params: {
          id: id
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.init();
        } else {
          this.$layer.msg((result.msg == null || "" ? '删除失败' : result.msg));
        }
      })
    },
    toItem (itemId) {
      this.$router.push({
        name: "item",
        query: {
          itemId: itemId
        }
      })
    },
    toUser(userId) {
      this.$router.push({
        name: "user2",
        query: {
          userId: userId
        }
      })
    },
    checkChanged () {
      this.allPrice = 0;
      for (var index in this.checkedItem) {
        this.allPrice += this.checkedItem[index].itemNum * this.checkedItem[index].sellingPrice;
      }
    },
    selectAll () {
      this.selectFlag = !this.selectFlag;
      this.checkedItem = [];
      if (this.selectFlag) {
        for (var i in this.shopcarts) {
          var list = this.shopcarts[i];
          for (var j in list) {
            this.checkedItem.push(list[j]);
          }
        }
      }
      this.checkChanged();
    },
    initOrder () {
      var items = this.checkedItem;
      var itemIds = [];
      for (var i in items) {
        itemIds.push(items[i].itemId);
      }
      this.axios.post("/trade/order/shopcart", {
        itemIds: itemIds
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          var orderIds = result.data;
          var orderId = "";
          for (var i in orderIds) {
            orderId += orderIds[i] + "&&";
          }
          this.$router.push({
            name: "orderconfirm",
            query: {
              orderId: orderId
            }
          })
        } else {
          this.$layer.msg((result.msg == null || "" ? '系统异常' : result.msg));
        }
      })
    }
  }
}
</script>

<style scoped>
@import "../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../assets/basic/css/demo.css";
@import "../../assets/css/cartstyle.css";
@import "../../assets/css/optstyle.css";
</style>
